<template>
  <div class="user">
    <!-- 面包屑导航 -->
    <breadcrumb />

    <!-- 卡片视图区 -->
    <el-card>
      <!-- 搜索与添加 -->
      <search-and-add
        :queryInfo="queryInfo"
        @addClick="addDialogVisible = true"
        @getUserList="getUserList"
      />

      <!-- 用户列表区 -->
      <user-list-area :userList="userList" @setRole="setRole" />

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!-- 添加用户对话框 -->
    <el-dialog
      title="添加用户"
      :visible.sync="addDialogVisible"
      width="50%"
      @close="clearUserData"
    >
      <!-- 添加用户 -->
      <add-user ref="addUserRef" @getUserList="getUserList" />
      <!-- 底部按钮 -->
      <span slot="footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmInfo"> 确 定 </el-button>
      </span>
    </el-dialog>

    <!-- 修改用户对话框 -->
    <modify-user />

    <!-- 分配角色 -->
    <el-dialog
      title="分配角色"
      :visible.sync="setRoleDialogVisible"
      width="50%"
      @closed="setRoleDialogClosed"
    >
      <!-- 分配角色 -->
      <p>当前的用户: {{ userInfo.username }}</p>
      <p>当前的角色: {{ userInfo.role_name }}</p>
      <p>
        分配新角色:
        <el-select v-model="selectRoleId" placeholder="请选择">
          <el-option
            v-for="item in rolesList"
            :key="item.id"
            :label="item.roleName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </p>
      <!-- 底部按钮 -->
      <span slot="footer">
        <el-button @click="setRoleDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveRoleInfo"> 确 定 </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getUserList } from 'network/user.js'
import { getRolesList, allotRoleById } from 'network/roles.js'

import Breadcrumb from './childComps/Breadcrumb.vue'
import SearchAndAdd from './childComps/SearchAndAdd.vue'
import AddUser from './childComps/AddUser.vue'
import UserListArea from './childComps/UserListArea.vue'
import ModifyUser from './childComps/ModifyUser.vue'
export default {
  components: {
    Breadcrumb,
    SearchAndAdd,
    AddUser,
    UserListArea,
    ModifyUser,
  },
  name: 'Users',
  data() {
    return {
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 2,
      },
      userList: [],
      total: 0,
      addDialogVisible: false,
      showEditDialog: false,
      setRoleDialogVisible: false,
      userInfo: {},
      rolesList: [],
      selectRoleId: '',
    }
  },
  created() {
    this.getUserList()
    this.$bus.$on('getUserList', () => {
      this.getUserList()
    })
  },
  methods: {
    async getUserList() {
      const res = await getUserList(this.queryInfo)
      // console.log(res)
      if (res.meta.status !== 200)
        return this.$message.error('获取用户列表失败')
      this.userList = res.data.users
      this.total = res.data.total
    },
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getUserList()
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage
      this.getUserList()
    },
    clearUserData() {
      this.$refs.addUserRef.clearUserData()
    },
    confirmInfo() {
      this.$refs.addUserRef.confirmInfo()
      this.$bus.$on('success', () => {
        this.addDialogVisible = false
      })
    },
    async setRole(userInfo) {
      this.userInfo = userInfo

      const res = await getRolesList()
      if (res.meta.status !== 200)
        return this.$message.error('获取角色列表失败!')
      this.rolesList = res.data
      this.setRoleDialogVisible = true
    },
    async saveRoleInfo() {
      if (!this.selectRoleId) return this.$message.error('请选择要分配的角色!')

      const res = await allotRoleById(this.userInfo.id, this.selectRoleId)
      if (res.meta.status !== 200) this.$message.error('更新角色失败!')
      this.$message.success('更新角色成功!')

      console.log(res)
      this.getUserList()
      this.setRoleDialogVisible = false
    },
    setRoleDialogClosed() {
      this.selectRoleId = ''
      this.userInfo = {}
    },
  },
}
</script>
<style lang="less" scoped>
</style>